<template>
  <div class="standard-management-container">
    <h1>标准管理</h1>

    <div class="search-and-buttons">
      <input
        type="text"
        class="search-input"
        placeholder="请输入搜索关键字"
        v-model="searchText"
      />

      <div class="buttons">
        <button class="add-button" @click="addItem()">添加</button>
        <button class="import-excel-button" @click="triggerFileInput">
          导入Excel
        </button>
        <input
          type="file"
          ref="fileInput"
          @change="importFromExcel"
          style="display: none"
          accept=".xlsx, .xls"
        />
      </div>
    </div>

    <table class="standards-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>大类</th>
          <th>产品名</th>
          <th>标准编号（含年号）</th>
          <th>标准名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in filteredItems" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.productName }}</td>
          <td>{{ item.standardNumber }}</td>
          <td>{{ item.standardName }}</td>
          <td>
            <button class="view-item-button" @click="showItem(item)">
              查看项目
            </button>
            <button class="delete-item-button" @click="deleteItem(item)">
              删除
            </button>
            <button class="view-sample-button" @click="showSample(item)">
              查看样品
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import XLSX from "xlsx";

export default {
  name: "StandardManagement",
  data() {
    return {
      items: [
        // 示例数据，实际数据应从后端获取
        {
          id: 1,
          category: "无源医疗器械",
          productName: "医用防护口罩",
          standardNumber: "GB 19083-2023",
          standardName: "医用防护口罩",
        },
        {
          id: 2,
          category: "无源医疗器械",
          productName: "医用一次性防护服",
          standardNumber: "GB 19083-2023",
          standardName: "医用一次性防护服",
        },
        {
          id: 3,
          category: "无源医疗器械",
          productName: "医用敷料",
          standardNumber: "GB 16886-2023",
          standardName: "医用敷料",
        },
        // ... 其他数据行
      ],
      searchText: "",
    };
  },
  computed: {
    filteredItems() {
      if (!this.searchText) {
        return this.items;
      }
      return this.items.filter((item) => {
        return Object.values(item).some((value) =>
          value.toString().toLowerCase().includes(this.searchText.toLowerCase())
        );
      });
    },
  },
  methods: {
    addItem() {
      // 处理添加新项的逻辑
    },
    triggerFileInput() {
      // 触发隐藏的文件输入元素的点击事件
      this.$refs.fileInput.value = null; // 清空文件输入，以便可以选择相同的文件
      this.$refs.fileInput.click();
    },
    importFromExcel(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: "array" });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 假设Excel没有标题行
        // 处理导入的数据
        this.processImportedData(json);
      };
      reader.readAsArrayBuffer(file);
    },
    processImportedData(data) {
      // 假设数据是一个二维数组，每个子数组代表一行
      // 如果Excel有标题行，header应该设置为1，那么这里从索引1开始取值
      this.items = data.map((row, index) => {
        return {
          id: index + 1, // 假设每行有一个唯一的ID
          category: row[0], // 假设第一列是类别
          productName: row[1], // 假设第二列是产品名
          standardNumber: row[2], // 假设第三列是标准编号
          standardName: row[3], // 假设第四列是标准名称
        };
      });
    },
    showItem() {
      // 查看项目详情的逻辑
      this.$router.push({ name: "check_project1" });
    },
    deleteItem(item) {
      // 删除项目的逻辑
      if (confirm("确定要删除此项目吗？")) {
        const index = this.items.indexOf(item);
        if (index !== -1) {
          this.items.splice(index, 1);
        }
      }
    },
    showSample(item) {
      // 显示样品的逻辑
      alert(`查看样品信息：${JSON.stringify(item)}`);
    },
  },
};
</script>

<style scoped>
.standard-management-container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.search-and-buttons {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.search-input {
  flex-grow: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.buttons button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-button {
  background-color: #007bff;
  color: white;
}

.import-excel-button {
  background-color: #17a2b8;
  color: white;
}

.standards-table {
  width: 100%;
  border-collapse: collapse;
}

.standards-table th,
.standards-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.standards-table th {
  background-color: #f8f9fa;
}

.view-item-button {
  background-color: #28a745;
  color: white;
}

.delete-item-button {
  background-color: #dc3545;
  color: white;
}

.view-sample-button {
  background-color: #ffc107;
  color: black;
}
</style>
